<template>
  <div class="myactivity">
    <div v-if="$route.path=='/activity/myActivity'">
      <a-card :bordered="false" style="border-radius:8px;">
        <div class="card_title">
          活动列表
        </div>
        <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">
          <div class="h24">
            <div class="flex row_bet flex_wrap">
              <a-radio-group v-model="status" style="margin-bottom: 5px;margin-left:5px;" @change="statusChange">
                <a-radio-button :value="1">
                  在线活动
                </a-radio-button>
                <a-radio-button :value="2">
                  到期活动
                </a-radio-button>
              </a-radio-group>
              <a-radio-group
                class="br4"
                v-model="sceneId"
                style="margin-bottom: 5px;margin-left:5px;"
                @change="sceneIdChange">
                <a-radio-button value="">
                  所有类型
                </a-radio-button>
                <a-radio-button :value="6">
                  普通招商
                </a-radio-button>
                <a-radio-button :value="8">
                  内容招商
                </a-radio-button>
                <a-radio-button :value="12">
                  品牌快抢
                </a-radio-button>
                <a-radio-button :value="10">
                  自营货品
                </a-radio-button>
              </a-radio-group>
            </div>
          </div>
          <div class="flex row_left flex_wrap">
            <a-input-search
              placeholder="活动id / 标题"
              style="width: 200px;margin-left:5px;margin-bottom: 5px"
              v-model="search"
              @search="onSearch"
            />
            <a-button type="primary" icon="plus" @click="drawershow = true" class="br4" style="margin:0 5px;">
              申请活动
            </a-button>
            <a-button icon="plus" @click="drawer2show = true" class="br4"></a-button>
          </div>
        </div>
        <a-table
          :columns="columns"
          :rowKey="activity => activity.eventId"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="sceneId" slot-scope="row">
            <div class="flex col_center">
              <span
                :style="{
                  color:row.sceneId === 6 ? '#96989B' : row.sceneId === 8 ? '#2396F9': row.sceneId === 12 ?'#39C15B' : '#8552a1'
                }">[{{ row.sceneId === 6 ? '普通招商' : row.sceneId === 8 ? '内容招商': row.sceneId === 12 ?'品牌快抢' : '自营货品' }}]
              </span>
              <span class="ml5">  {{ row.title }}</span>
            </div>
          </div>
          <div slot="active" slot-scope="row">
            <a-button type="link" @click="docopy(row.eventId)">链接</a-button>
            <a-button type="link" @click="goaudit(row)">审核</a-button>
          </div>
        </a-table>
      </a-card>
      <a-drawer
        title="申请活动"
        :width="513"
        :visible="drawershow"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <div class="drawer1">
          <div class="titles">发布活动标题</div>
          <a-select placeholder="请选择活动标题" class="chooseipt" @change="titleChange">
            <a-select-option v-for="(item, index) in titleList" :key="index" :value="item.id">
              {{ item.title }}
            </a-select-option>
          </a-select>
          <div class="titles">活动截止日期</div>
          <a-date-picker
            v-model="endtime"
            :disabled-date="disabledEndDate"
            format="YYYY-MM-DD"
            class="chooseipt br4"
            @change="onChange"/>
          <div class="titles">近30天销量</div>
          <a-input v-model="min_mum" placeholder="报名商品近30天最低销量" class="chooseipt br4">
            <a-icon slot="suffix" type="plus" @click="minpuls"/>
          </a-input>
          <div class="titles">服务费要求</div>
          <a-input v-model.number="min_server" placeholder="服务费率，请勿填写百分号" suffix="%" class="chooseipt br4"/>
          <!--          <div class="titles">佣金比例</div>-->
          <!--          <a-input v-model.number="commRate" placeholder="佣金比例，请勿填写百分号" suffix="%" class="chooseipt br4"/>-->
          <div class="titles">发布活动联盟账号</div>
          <a-select placeholder="选择要发布的联盟账号" class="chooseipt" @change="userChange">
            <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">
              {{ item.cpName }}
            </a-select-option>
          </a-select>
          <div class="titles">活动联系旺旺</div>
          <a-input v-model="wangwang" placeholder="填写活动联系的旺旺账号" class="chooseipt"/>
          <div class="titles">活动招商类型</div>
          <a-radio-group v-model="type" class="chooseipt" @change="handleChange">
            <a-radio :value="6">
              普通招商
            </a-radio>
            <a-radio :value="8">
              内容招商
            </a-radio>
            <a-radio :value="12">
              品牌快抢
            </a-radio>
            <a-radio :value="10">
              自营货品
            </a-radio>
          </a-radio-group>
          <div
            :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
              zIndex: 1
            }"
          >
            <a-button
              type="primary"
              :disabled="btnloading"
              style="float:left;"
              :loading="btnloading"
              class="br4"
              @click="dosubmit">
              <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
              {{ btnloading===true?'提交中...':'提 交 申 请' }}
            </a-button>
          </div>
        </div>
      </a-drawer>
      <a-drawer
        title="添加旧活动"
        :width="513"
        :visible="drawer2show"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <div class="drawer1">
          <div class="titles">发布活动联盟账号</div>
          <a-select placeholder="选择要发布的联盟账号" class="chooseipt br4" @change="userChange">
            <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">
              {{ item.cpName }}
            </a-select-option>
          </a-select>
          <div class="titles">活动ID</div>
          <a-input v-model.number="min_server" placeholder="已经申请的活动ID" class="chooseipt br4"/>
          <div
            :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
              zIndex: 1
            }"
          >
            <a-button type="primary" style="float:left;" :loading="btnloading" class="br4" @click="dosubmit">
              <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
              {{ btnloading===true?'提交中...':'提 交 申 请' }}
            </a-button>
          </div>
        </div>
      </a-drawer>
    </div>
    <router-view v-else></router-view>
  </div>
</template>

<script>
  import { doaddactivity, getactivityList, getactivitytitle, getunionuser } from '@/api/activityApi'
  import moment from 'moment'

  export default {
    name: 'Myactivity',
    data () {
      return {
        moment,
        drawershow: false,
        drawer2show: false,
        endtime: '',
        min_mum: '',
        sceneId: '',
        commRate: '',
        status: 1,
        search: '',
        wangwang: '',
        min_server: '',
        union_id: '',
        user_name: '',
        type: '',
        scenename: 1,
        timer: [],
        titleList: [],
        userList: [],
        title_id: '',
        activity_name: '请选择活动标题',
        columns: [
          {
            title: '活动标题',
            align: 'left',
            scopedSlots: {
              customRender: 'sceneId'
            }
          },
          {
            title: '活动ID',
            // width: 150,
            align: 'center',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'saveTime',
            scopedSlots: {
              customRender: 'saveTime'
            }
          },
          {
            title: '结束时间',
            align: 'center',
            // width: 500,
            dataIndex: 'endTime',
            scopedSlots: {
              customRender: 'endTime'
            }
          },
          {
            title: '活动总付款',
            align: 'center',
            dataIndex: 'price',
            scopedSlots: {
              customRender: 'price'
            }
          },
          {
            title: '团长账号',
            align: 'center',
            dataIndex: 'cpName',
            scopedSlots: {
              customRender: 'cpName'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        value: '',
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getactivityList(1, 15, 2, 1)
      this.getactivitytitle()
      this.getunionuser()
    },
    mounted () {
    },
    methods: {
      disabledEndDate (endValue) {
        if (!endValue) {
          return false
        }
        return endValue < moment().subtract(1, 'days') || endValue > moment().add(30, 'days')
      },
      sceneIdChange (e) {
        // console.log(this.sceneId)
        this.getactivityList(1, 15, 1, this.status, this.search)
      },
      minpuls () {
        this.min_mum++
      },
      onClose () {
        this.drawershow = false
        this.drawer2show = false
      },
      goaudit (row) {
        this.$store.dispatch('setRowsname', row)
        this.$router.push({
          path: '/activity/myActivity/myAudit'
        })
      },
      docopy (id) {
        const that = this
        const str = 'http://ad.alimama.com/zhaoshang/cpevent/index.htm?srcCode=1&keyword=' + id
        this.$copyText(str).then(
          function (e) {
            // console.log(e)
            that.$success({
              title: '链接复制成功',
              content: str
            })
          },
          function (e) {
            console.log(e)
          }
        )
      },
      dosubmit () {
        this.btnloading = true
        const that = this
        this.$confirm({
          title: '确认要提交申请吗？',
          content: '请确保所填的信息正确，申请后不可修改。',
          onOk () {
            that.doaddactivity()
          },
          onCancel () {
            that.btnloading = false
          }
        })
      },
      // 新增活动
      doaddactivity () {
        if (
          this.title_id !== '' &&
          this.min_mum !== '' &&
          this.endtime !== '' &&
          this.union_id !== '' &&
          this.wangwang !== '' &&
          this.min_server !== '' &&
          this.type !== ''
        ) {
          doaddactivity({
            title_id: this.title_id,
            min_mum: this.min_mum,
            end_time: this.endtime,
            union_id: this.union_id,
            wangwang: this.wangwang,
            type: this.type,
            min_server: this.min_server
          })
            .then(res => {
              // console.log(res)
              if (res.code === 200) {
                this.btnloading = false
                this.drawershow = false
                this.$message.success('您选择的活动已经申请成功!')
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.btnloading = false
          this.$message.warning('请检查所需条件!')
        }
      },
      // 团队
      getunionuser () {
        getunionuser()
          .then(res => {
            if (res.code === 200) {
              // console.log('团队返回', res)
              this.userList = res.data
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 活动标题
      getactivitytitle () {
        getactivitytitle()
          .then(res => {
            if (res.code === 200) {
              // console.log('标题返回', res)
              this.titleList = res.data
            } else {
              // this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      getactivityList (page, pagesize, type, status, search) {
        this.loading = true
        getactivityList({
          page: page,
          pagesize: pagesize,
          type: type, // 1=共用活动  2=我的活动
          status: status, // 1有效活动 2失效活动 不传默认有效活动
          search: search,
          sceneId: this.sceneId
        })
          .then(res => {
            // console.log(res)
            this.activity = res.data.data
            //  this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getactivityList(params.page, 15, 2, this.status, this.search)
      },
      onSearch (value) {
        console.log(value)
        this.getactivityList(1, 15, 2, this.status, this.search)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.getactivityList(1, 15, 2, this.status, this.search)
      },
      onChange (date, dateString) {
        console.log(date, dateString)
        this.endtime = moment(date).format('YYYY-MM-DD')
        console.log(this.endtime)
      },
      userChange (value) {
        console.log(`userid ${value}`)
        this.union_id = value
        this.user_name = this.getobjnature(this.userList, 'id', value).cpName
      },
      titleChange (value) {
        console.log(`selected ${value}`)
        this.title_id = value
        this.activity_name = this.getobjnature(this.titleList, 'id', value).title
      },
      getobjnature (list, key, nature) {
        for (const i in list) {
          if (list[i][key] === nature) {
            return list[i]
          }
        }
        return null
      },
      handleChange (e) {
        // console.log(e.target.value)
        this.sceneId = e.target.value
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .myactivity {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    .h24 {
      /deep/ .ant-radio-button-wrapper {
        height: 24px;
        line-height: 22px;
      }
    }
  }
</style>
